/*
 * @Author: fangquan
 * @Date: 2020-06-10 13:38:32 
 * @Last Modified by: fangquan
 * @Last Modified time: 2020-06-10 13:38:32 
 * @Usage 布局相关
 */

//  ---- 包裹盒子 ----
.container {
 padding: 10px 15px;

 &.row {
   padding: 0 15px;
 }

 &.column {
   padding: 10px 0;
 }
}

.html-content {
  img {
    display: block;
    max-width: 100%;
    margin: 10px auto 10px;
  }
}

// ---- 浮动 ----
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.clearfix {
  zoom: 1;

  &::after {
    content: "";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
  }
}

// ---- 对齐 ----
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.middle {
  vertical-align: middle;
}

.h_100 {
  height: 100%;
}

// ---- flex布局 ----
.box {
  display: flex;

  &.box-row-center {
    justify-content: center;
  }

  &.box-column-center {
    align-items: center;
  }

  &.box-column-start {
    align-items: flex-start;
  }

  &.box-column-end {
    align-items: flex-end;
  }

  &.box-center {
    @extend .box-row-center;
    @extend .box-column-center;
  }

  &.box-between {
    justify-content: space-between;
  }

  &.box-around {
    justify-content: space-around;
  }

  &.box-column {
    flex-flow: column;
  }

  &.box-wrap {
    flex-wrap: wrap;
  }

  &.box-start {
    justify-content: flex-start;
  }

  &.box-end {
    justify-content: flex-end;
  }
}

@for $i from 1 to 12 {
  .box-#{$i} {
    flex: $i;
  }
}